<template>
  <base-breadcrumb :title="titleName" :breadcrumb="!isAudit">
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-card :bordered="false">
          <title-name title="项目信息" />
          <a-row>
                        <a-col :md="16" :sm="16">
                          <a-form-model-item
                            label="所属单位:"
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
                          >
                            <!-- <SelectSubCompany :disabled="pageType === 'view'" placeholder="请选择" v-model="form.branchCompanyId">
                            </SelectSubCompany> -->
                            <BaseInput disabled v-model="form.viewName" />
                          </a-form-model-item>
                        </a-col>
<!--            <a-col :md="8" :sm="8">-->
<!--              <a-form-model-item-->
<!--                label="所属分公司:"-->
<!--                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"-->
<!--                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"-->
<!--              >-->
<!--                &lt;!&ndash; <SelectSubCompany :disabled="pageType === 'view'" placeholder="请选择" v-model="form.branchCompanyId">-->
<!--                </SelectSubCompany> &ndash;&gt;-->
<!--                <BaseInput disabled v-model="form.branchCompany" />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :md="8" :sm="8">-->
<!--              <a-form-model-item-->
<!--                label="项目名称:"-->
<!--                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"-->
<!--                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"-->
<!--              >-->
<!--                &lt;!&ndash; <SelectProject-->
<!--                  placeholder="请选择"-->
<!--                  :disabled="pageType === 'view'"-->
<!--                  :isClear="pageType === 'add'"-->
<!--                  v-model="form.projectId"-->
<!--                  :form="form"-->
<!--                >-->
<!--                </SelectProject> &ndash;&gt;-->
<!--                <BaseInput disabled v-model="form.projectName" placeholder="" />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
            <a-col :md="8" :sm="8">
              <a-form-model-item
                prop="achievementType"
                label="科技项目类型:"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput disabled :class="(pageType !== 'view') ? 'bluebg' : ''" v-model="form.achievementType" placeholder="" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="8" :sm="8">
              <a-form-model-item
                label="计划开竣工时间:"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <!-- <BaseInput  placeholder=""/> -->
                <a-range-picker disabled v-model="form.projectDate" valueFormat="YYYY-MM-DD" />
              </a-form-model-item>
            </a-col>
            <a-col :md="16" :sm="16">
              <a-form-model-item
                label="地理位置:"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <a-spin :spinning="loadingProject" style="margin-top:-3px">
                  <ellipsis tooltip :length="65">{{ form.address }}</ellipsis>
                  <span v-if="!form.address">无</span>
                </a-spin>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <a-form-model-item label="项目人员名单" style="display: flex">
                <a-spin :spinning="loadingProject">
                  <a-tag v-for="item in form.employees" :key="item.id" class="mb12 btn_right">
                    {{ item.post ? item.post + '：' : '' }}{{ item.employeeName }}
                  </a-tag>
                  <span v-if="!form.employees || form.employees.length == 0">无</span>
                </a-spin>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card :bordered="false">
          <title-name title="工程概况" />
          <a-row v-if="form.pictureFileArrays && form.pictureFileArrays.length > 0">
            <a-form-model-item
              label="效果图:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <upload-list
                uploadType="image"
                businessCode="SHE01"
                :disabled="true"
                :editModel="0"
                :uploadArrys.sync="form.pictureFileArrays"
                multiple
              ></upload-list>
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-form-model-item
              prop="designOverview"
              label="建设概况:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :disabled="pageType === 'view'"
                :maxLength="3000"
                v-model.trim="form.designOverview"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-form-model-item
              prop="structureOverview"
              label="结构概况:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :maxLength="3000"
                :disabled="pageType === 'view'"
                v-model.trim="form.structureOverview"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-form-model-item
              prop="constructOverview"
              label="建筑概况:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :disabled="pageType === 'view'"
                :maxLength="3000"
                v-model.trim="form.constructOverview"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-form-model-item
              label="机电概况:"
              prop="electromechanicalOverview"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :disabled="pageType === 'view'"
                :maxLength="3000"
                v-model.trim="form.electromechanicalOverview"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-form-model-item
              prop="projectFeatures"
              label="工程特点:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :disabled="pageType === 'view'"
                :maxLength="3000"
                v-model.trim="form.projectFeatures"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-form-model-item
              prop="keyAndDifficultTechnologies"
              label="重难点技术:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :disabled="pageType === 'view'"
                :maxLength="3000"
                v-model.trim="form.keyAndDifficultTechnologies"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
          </a-row>
        </a-card>
        <a-card>
          <title-name title="科技成果策划" />
          <a-tabs default-active-key="1"><!-- @change="callback" -->
            <a-tab-pane v-for="(tabpane, index) in form.detailMap" :key="index" :tab="index == '1' ? '汇总' : index" force-render>
              <a-spin :spinning="spinning">
                <a-list :grid="{ gutter: 16, column: 2 }" :data-source="tabpane">
                  <a-list-item slot="renderItem" slot-scope="item">
                    <a-card>
                      <a-row :gutter="16" class="cardBox">
                        <a-col :span="6">
                          <div align="left" style="margin-top: 6px">
                            <b>{{ item.typeName }}</b>
                          </div>
                        </a-col>
                        <a-col :span="18">
                          <a-row type="flex" align="middle" v-for="(i, idx) in item.detailsVO" :key="i.id + '_' + idx" class="mb20">
                            <a-col :span="8">
                              {{ i.levelName }}
                            </a-col>
                            <a-col :span="16">
                              <a-row type="flex" style="flex-wrap: nowrap" align="middle">
                                <div style="flex-shrink: 0">拟完成数量：</div>
                                <BaseInputNumber
                                  :min="0"
                                  :max="1000000000"
                                  isInt
                                  :disabled="pageType === 'view' || index == '1' || (pageType === 'update' && index <= curYear)"
                                  placeholder="请输入"
                                  v-model.trim="i.poltCompleteNum"
                                  style="width: 100%"
                                  @change="numberChange"
                                ></BaseInputNumber>
                              </a-row>
                            </a-col>
                          </a-row>
                        </a-col>
                      </a-row>
                    </a-card>
                  </a-list-item>
                </a-list>
              </a-spin>
            </a-tab-pane>
          </a-tabs>
          <!-- <a-spin :spinning="spinning">
            <a-list :grid="{ gutter: 16, column: 2 }" :data-source="form.achievementType">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-card>
                  <a-row :gutter="60" class="cardBox">
                    <a-col :span="6">
                      <div align="right" style="margin-top: 6px">
                        <b>{{ item.name }}</b>
                      </div>
                    </a-col>
                    <a-col :span="18">
                      <a-row type="flex" align="middle" v-for="i in item.data" :key="i.id" class="mb20">
                        <a-col :span="8">
                          {{ i.levelName }}
                        </a-col>
                        <a-col :span="16">
                          <a-row type="flex" style="flex-wrap: nowrap" align="middle">
                            <div style="flex-shrink: 0">拟完成数量：</div>
                            <BaseInputNumber
                              :min="0"
                              :max="1000000000"
                              isInt
                              :disabled="pageType === 'view'"
                              placeholder="请输入"
                              v-model.trim="i.plotNum"
                              style="width: 100%"
                            ></BaseInputNumber>
                          </a-row>
                        </a-col>
                      </a-row>
                    </a-col>
                  </a-row>
                </a-card>
              </a-list-item>
            </a-list>
          </a-spin> -->
        </a-card>

        <a-card>
          <title-name title="相关措施" />
          <a-row>
            <a-form-model-item
              prop="other"
              label="相关措施:"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                :disabled="pageType === 'view'"
                :maxLength="3000"
                v-model.trim="form.other"
                placeholder="请输入"
              ></BaseTextarea>
            </a-form-model-item>
            <a-form-model-item prop="plotFileArrays" style="display: flex" class="filetalbe">
              <UploadTableNew
                ref="uploadTable"
                mode="add"
                :disabled="pageType === 'view'"
                :init-file-list="fileInfoTemp"
                :need-page="false"
                business-code="STM02"
              />
            </a-form-model-item>
          </a-row>
        </a-card>

        <a-card style="margin-bottom: 50px">
          <title-name title="科技管理策划电子版" />
          <a-form-model-item label="科技管理策划附件：" prop="fileArrays" style="display: flex">
            <upload-list
              v-if="(pageType == 'view' && form.fileArrays && form.fileArrays.length > 0) || pageType != 'view'"
              :isClose="pageType !== 'view'"
              :disabled="pageType === 'view'"
              businessCode="STM02"
              :uploadArrys.sync="form.fileArrays"
              multiple
            ></upload-list>
            <span v-else>无</span>
          </a-form-model-item>
        </a-card>
      </a-form-model>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div
    v-if="!isConsultation"
      class="btn_box page-btn-right-top"
    >
      <a-button :disabled="loading" :loading="defloading" v-if="pageType != 'view' && pageType != 'update'" type="primary" class="button_right" @click="handleSubmit(0)"
        >保存草稿</a-button
      >
      <a-button :disabled="loading" :loading="subloading" v-if="pageType != 'view'" type="primary" class="button_right" @click="handleSubmit(1)"
        >提交</a-button
      >
      <a-button v-if="checkVisibleInDetail" @click="handleActiveClose">关闭</a-button>
    </div>
    <selectApprover
      :businessId="businessId"
      :processConfig="setProcessConfig"
    ></selectApprover>

  </base-breadcrumb>
</template>
<script>
import moment from 'moment'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
const dataList = [
  {
    title: '工法',
    list: [
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
    ],
  },
  {
    title: '专利',
    list: [
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
    ],
  },
  {
    title: '科技奖项',
    list: [
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
    ],
  },
  {
    title: '示范工程',
    list: [
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
      {
        name: '国家级重点奖项',
        number: '',
      },
    ],
  },
]
import { addSciencePlots, editSciencePlots, getPlotsDetails, getArchivementsList, getProject } from '@/api/science'
import UploadList from '@/components/UploadList'
import {  Ellipsis } from '@/components'
import BaseEditPage from '@/views/baseEditPage'

export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    SelectSubCompany,
    SelectProject,
    UploadList,
    Ellipsis
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let validator = (rule, value, callback) => {
      if (value && value.length > 0) {
        callback()
      } else {
        callback('请上传附件！')
      }
    }
    return {
      curYear: moment().format('YYYY'),
      form: {
        branchCompany: '',
        projectName: '',
        projectDate: [],
        achievementType: '',
        address: '',
        plotFileArrays: [],
        employees: [],
        pictureFileArrays: [],
        designOverview: '',
        structureOverview: '',
        constructOverview: '',
        electromechanicalOverview: '',
        projectFeatures: '',
        keyAndDifficultTechnologies: '',
        detailMap: {},
        other: '',
        fileArrays: [],
        viewName: ''
      },
      fileInfoTemp: [],
      loading: false,
      defloading: false,
      subloading: false,
      spinning: false,
      loadingProject: false,
      list: '',
      id: '',
      pageType: 'view',
      type: '',
      dataList,
      // form: {
      //   column: 2,
      // },
      employeeName: '',
      column: 2,
      rules: {
        branchCompanyId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        projectDate: [{ required: true, message: '请选择开竣工日期', trigger: 'change' }],
        designOverview: [{ required: true, message: '请输入设计概况', trigger: 'change' }],
        structureOverview: [{ required: true, message: '请输入结构概况', trigger: 'change' }],
        constructOverview: [{ required: true, message: '请输入建筑概况', trigger: 'change' }],
        electromechanicalOverview: [{ required: true, message: '请输入机电概况', trigger: 'change' }],
        projectFeatures: [{ required: true, message: '请输入工程特点', trigger: 'change' }], // add
        keyAndDifficultTechnologies: [{ required: true, message: '请输入重难点技术', trigger: 'change' }],
        other: [{ required: true, message: '请输入相关措施', trigger: 'change' }], // add
        fileArrays: [{ required: true, validator: validator, trigger: 'blur' }],
        plotFileArrays: [{ required: true, validator: validator, trigger: 'blur' }], // add
      },
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
  computed: {
    titleName() {
      const obj = { add: '科技管理策划新增', edit: '编辑科技管理策划', view: '科技管理策划详情', update: '更新科技管理策划' }
      return obj[this.pageType]
    }
  },
 async mounted() {
    if(!this.businessId){
      this.pageType = this.type
    }
    this.getData()
     //获取通过获取流程配置值
     this.processConfig = await this.$getConfigFn('achievements_plot')
  },
  watch: {
    // 项目值发生改变
    'form.projectId'(e) {
      if (e) {
        this.loadingProject = true
        getProject({ projectId: e })
          .then((res) => {
            this.loadingProject = false
            if (res.code === 200) {
              this.$set(this.form, 'address', res.data.address)
              this.$set(this.form, 'employees', res.data.employees)
              this.$set(this.form, 'achievementType', res.data.achievementType)
            }
          })
          .catch((res) => {
            this.loadingProject = false
          })
      } else {
        this.$set(this.form, 'address', '')
        this.$set(this.form, 'employees', '')
        this.$set(this.form, 'achievementType', '')
      }
    },
    fileInfoTemp: {
      immediate: true,
      deep: true,
      handler(newList) {
        this.form.plotFileArrays = newList || []
        this.$refs.ruleForm && this.$refs.ruleForm.validateField('plotFileArrays')
      }
    },
    'form.fileArrays'(e) {
      this.$refs.ruleForm && this.$refs.ruleForm.validateField('fileArrays')
    }
  },
  methods: {
    numberChange() {
      this.form.detailMap['1'].map((item, index) => {
        item.detailsVO.map((v, i) => {
          v.poltCompleteNum = 0
          return v
        })
        return item
      })
      for (let idx in this.form.detailMap) {
        if (idx == '1') { continue }
        const yearObj = this.form.detailMap[idx]
        for (let i = 0; i < yearObj.length; i++) {
          const detailsVO = yearObj[i].detailsVO
          for (let j = 0; j < detailsVO.length; j++) {
            const poltCompleteNum = detailsVO[j].poltCompleteNum
            this.form.detailMap['1'][i].detailsVO[j].poltCompleteNum += poltCompleteNum
          }
        }
      }
    },
    // 提交表单
    handleSubmit(status) {
      let that = this
      that.setProcessConfig = null
      if (status=='0') {
        let form = { ...that.form, plotsStatusCode: status }
        if (form.projectDate) {
          form.startDate = form.projectDate[0]
          form.endDate = form.projectDate[1]
          delete form.projectDate
        }
        that.defloading = true
        editSciencePlots(form).then((res) => {
          that.defloading = false
          if (res.code == 200 || res.data.code == 200) {
            that.$message.success('保存成功！')
            // 关闭当前页
            that.$multiTab.close()
          }
        }).catch(() => {
          that.defloading = false
        })
      } else {
        that.$refs.ruleForm.validate((valid) => {
          if (valid) {
            // let api = this.pageType == 'edit' ? editSciencePlots : addSciencePlots // 动态取得api请求方法
            let api = editSciencePlots
            let form = { ...that.form, plotsStatusCode: status }
            if (!this.form.plotFileArrays || this.form.plotFileArrays.length==0) {
              this.$message.error('请先上传相关措施附件！')
              return
            }
            if (form.projectDate) {
              form.startDate = form.projectDate[0]
              form.endDate = form.projectDate[1]
              delete form.projectDate
            }
            this.submitApprovalConfirm(status*1 ===1 ? this.processConfig : 6, (flag)=>{
                  if(!flag) {
                    this.subloading = true
                    return
                  }
                  return new Promise((resolve, reject) => {
                  // 加载框
                  that.subloading = true
                  api(form)
                    .then((res) => {
                      // 取消加载框
                      that.subloading = false
                      if (res.code == 200 || res.data.code == 200) {
                        resolve();
                        that.$message.success('提交成功！')
                        //提交时，返回id
                          that.businessId = res.data.id || this.id
                          that.setProcessConfig = that.processConfig
                          // 关闭当前页
                          // that.$multiTab.close()
                      } else {
                        reject()
                      }
                    })
                    .catch((res) => {
                      // 取消加载框
                      that.subloading = false
                      reject()
                    })
                })
                })
          }else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      }
    },
    getData() {
      if (this.pageType !== 'add') {
        this.loading = true
        getPlotsDetails({ id: this.id })
          .then((res) => {
            this.loading = false
            if (res.code == 200) {
              res.data.projectDate = [res.data.startDate, res.data.endDate]
              this.fileInfoTemp = res.data.plotFileArrays || []
              this.form = res.data
              this.form.viewName = this.form.branchCompany + '/' + this.form.projectName
              this.$nextTick(() => {
                this.$refs.ruleForm.clearValidate(['plotFileArrays', 'fileArrays'])
              })
            }
          })
          .catch((res) => {
            this.loading = false
          })
      } else {
        // this.spinning = true
        // getArchivementsList({ status: '1' })
        //   .then((res) => {
        //     this.spinning = false
        //     if (res.code === 200) {
        //       this.form.achievementType = res.data.filter((item) => item.data && item.data.length > 0)
        //     }
        //   })
        //   .catch((res) => {
        //     this.spinning = false
        //   })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.bluebg {
  /deep/ .ant-input{
    background: #1c9be3;
    color: #fff
  }
}
/deep/ .ant-card {
  .cardBox {
    height: 200px;
    overflow: auto;
    // scrollbar-width: none;
    // &::-webkit-scrollbar {
    //   display: none;
    // }
  }
}
/deep/ .filetalbe.ant-form-item .ant-form-item-control-wrapper{
  width: 100%;
}
</style>
